<template>
  <div>
    <el-popover :title="popoverTitle" placement="top" trigger="hover">
      <el-card slot="reference" shadow="always" width="100%">
        本月政治教育完成情况:
        <span>{{ `${finishHours}/${fullHours}小时` }}</span>
        <el-progress :percentage="percentage" :format="ProgressFormat" :color="customColorMethod" />
      </el-card>
      <p>已完成:  {{ finishTimes }}次{{ finishHours }}小时</p>
      <p>指标: {{ fullTimes }}次{{ fullHours }}小时 </p>
    </el-popover>
  </div>
</template>

<script>
import {
  getIndicatorList,
  getIndicatorRate
} from '@/api/zzxt/party-conference/confer-indicator'
import { parseTime } from '@/utils'
export default {
  name: 'CompanyProgress',
  data: () => ({
    ProgressValue: null,
    indicator: null
  }),
  computed: {
    popoverTitle() {
      const now = new Date()
      return `截止到${parseTime(now, '{yyyy}年{mm}月{dd}日0时整')}`
    },
    fullHours() {
      if (!this.indicator) return 0
      return this.indicator.requireHours
    },
    fullTimes() {
      if (!this.indicator) return 0
      return this.indicator.requireTimes
    },
    finishHours() {
      if (!this.ProgressValue) return 0
      return this.ProgressValue.length
    },
    finishTimes() {
      if (!this.ProgressValue) return 0
      return this.ProgressValue.count
    },
    percentage() {
      if (this.fullHours === 0) return 0
      return (this.finishHours / this.fullHours) * 100
    },
    currentCompany() {
      return this.$store.state.user.globalCompany
    }
  },
  watch: {
    currentCompany: {
      handler(val) {
        if (!val) return
        this.refresh()
        if (this.indicator) this.getIndicatorProgress()
      },
      immediate: true
    },
    indicator: {
      handler(val) {
        if (!val) return
        this.getIndicatorProgress()
      }
    }
  },
  methods: {
    parseTime,
    refresh() {
      const company = this.currentCompany
      const conferenceType = 128
      getIndicatorList({ company, conferenceType }).then(data => {
        const list = data.list
        if (list.length > 0) this.indicator = list[0]
      })
    },
    getIndicatorProgress() {
      const company = this.currentCompany
      const indicator = this.indicator.id
      getIndicatorRate({ company, indicator }).then(data => {
        const list = data.model.statistics.list
        list.forEach(item => {
          if (item.company === this.currentCompany) this.ProgressValue = item
        })
      })
    },
    ProgressFormat(percentage) {
      return percentage >= 100 ? '满' : `${percentage}%`
    },
    ProgressStatus(percentage) {
      return percentage === 100 ? 'success' : `warning`
    },
    customColorMethod(percentage) {
      if (percentage < 30) {
        return '#909399'
      } else if (percentage < 70) {
        return '#409eff'
      } else {
        return '#67c23a'
      }
    }
  }
}
</script>
